Lektion 2
Grundkörper einer HTML Datei
Formatierung I




In der zweiten Lektion erfahren Sie Folgendes:

  1. Was sind Tags?
  2. Grundgerüst einer HTML-Datei
  3. Einfache Zeichenformatierung
  4. Schriftart, Größe und Farbe
  5. Farbauswahl und Angabe in HTML
  6. Voreinstellungen für Textfarbe und Hintergrundfarbe
  7. Absatzformatierung
  8. Zeilenumbrüche verhindern und erzwingen

    9.  

Jetzt gehts los. Sie lernen in dieser Lektion, wie HTML-Dateien aufgebaut sind und erstellen Ihre erste Seite. Mit den ersten Befehlen zur Formatierung können Sie bereits einfache Inhalte gestalten.
Was sind Tags?

Die eigentlichen Befehle werden in HTML durch sogenannte Tags realisiert. Ein Tag besteht aus zwei Klammern: < und >. Zwischen diesen beiden Klammern steht der eigentliche Befehl.
Ein Beispiel: <b> schaltet das Zeichenformat auf fett und </b> schaltet dieses wieder aus. Das "b" steht für das englische Wort bold (fett). Fast alle Tags bestehen aus einem Anfangs- und Ende-Tag. Wenn sie ein oder mehrere Zeichen fett darstellen wollen, müssen Sie angeben, ab welchem Zeichen und bis zu welchem Zeichen diese Formatierung gelten soll. Durch das Anfangs- und Ende-Tag wird der Gültigkeitsbereich eindeutig festgelegt. 
Das Ende-Tag hat immer den Schrägstrich / nach dem < - Zeichen: 

Anfangs-Tag <b> 
Ende-Tag </b> 

Viele Tags können durch zusätzliche Angaben erweitert werden, die sogenannten Attribute.
Das Tag zur Erzeugung eines neuen Absatzes ist <p>. Das "p" steht für das englische Wort paragraph (Absatz). Um diesen Absatz zentriert auszurichten, wird das Attribut align (Ausrichtung) hinzugefügt und mit einem Wert belegt:
<p align="center"> bewirkt eine zentrierte Ausrichtung der Zeichen im Absatz. 
Grundsätzlich gibt es Attribute, die nur mit vorgegebenen Werten belegt werden können, andere Attribute erlauben beliebige Werte. (Nach HTML-Standard sind bei beliebigen Wertangaben die Angaben in Anführungszeichen zu setzen und bei allen anderen können Sie die Anführungszeichen unterdrücken.) Machen Sie sich das Leben einfach (es funktioniert mit allen Browsern):

Setzen Sie alle Wertangaben bei Attributen immer in Anführungszeichen!

Die aktuelle HTML-Version wird voraussichtlich die letzte sein. Danach wird HTML in XML integriert sein. Bislang wird vom W3C-Konsortium für die Zukunft die Schreibweise mit Anführungszeichen favorisiert. 

Der Aufbau eines Tags mit Attribut:
<Tagname Attribut="Wert">
Bsp.: 
<h3 align="right">, 
<font color="#009900"> oder 
<hr width="90%">

Neben den Tags mit Wertangabe gibt es noch eine Reihe von Tags, die Attribute ohne Wertangabe erlauben.
Bsp.: <table border>

Eine häufige Fehlerquelle bei den ersten Programmierversuchen mit HTML ist, dass zwar alle Anfangs-Tags gesetzt, jedoch die Ende-Tags vergessen werden - also: Machen Sie alle Türen zu, die Sie aufmachen!
Viele HTML-Editoren arbeiten sehr schlampig und lassen die Ende-Tags weg! Im Augenblick funktioniert es im Internet Explorer auch ohne die Ende-Tags fast problemlos. Es werden in Zukunft (folgende XML-Version) jedoch zwingend alle Ende Tags erforderlich sein. 
 
Grundgerüst einer HTML-Datei

Jedes HTML-Dokument hat ein Grundgerüst, welches die Bereiche eindeutig einteilt und dem Browser die steuernden Befehle liefert, die zur Darstellung des Dokuments notwendig sind. 
Der Aufbau eines HTML-Dokuments sieht so aus:
<HTML>
<HEAD>
<Meta HTTP-EQUIV="content-type" Content="text/html;charset=iso-8859-1">
<Title>
</Title>
</HEAD>
<BODY>
</BODY>
</HTML>
 

Jedes HTML-Dokument beginnt mit
<HTML>
und endet mit </HTML>.
Dieses Tag sagt dem Browser, dass es sich um ein HTML-Dokument handelt. Es könnte ja auch ein Text-Dokument oder irgendeine Grafikdatei sein.

Zwischen diesen beiden Tags stehen zunächst die Tags für den Kopf:
<HEAD>
</HEAD>
 

Zwischen den Head-Tags stehen die Tags für die Seiten-Überschrift:
<Title>
</Title>
Die Angaben zwischen den Title-Tags bestimmen den Text, der in der Überschriften-Leiste des Browsers angezeigt wird. Die Überschrift dieses Dokuments lautet: HTML-Grundkurs Dr. H. Jaitner Lektion 2.
(Ganz oben in der blauen Leiste).
Weiterhin können sich zwischen den Head-Tags Angaben für Suchmaschinen befinden, oder Befehle für JavaScript. 

Daran anschließend stehen die Tags für den eigentlichen Körper, die Inhalte der HTML-Seite:
<BODY>
</BODY>
 

Zwischen den Body-Tags stehen all die Befehle, die das Layout und den Inhalt steuern. Dies sind Angaben zum Text wie Schriftart und -größe, Befehle zum Einbinden und Positionieren von Grafiken, Steuerelemente für Hyperlinks etc. und natürlich die Texte selbst.

In der Vorlage oben befindet sich noch die Anweisung
<Meta HTTP-EQUIV="content-type" Content="text/html;charset=iso-8859-1">.
Mit dieser Anweisung wird dem Browser mitgeteilt, welchen Inhaltstyp dieses Dokument hat: HTML-Text mit dem Zeichensatz ISO-8859-1. Dieser Zeichensatz beinhaltet die Standard-Zeichen der westlichen Welt (Groß- und Kleinbuchstaben, Ziffern und etliche Sonderzeichen). Dies ist notwendig, da das Internet international ist und Ihre Zeichen nicht arabisch oder japanisch dargestellt werden sollen, sondern nach westlichem Standard.

Aufgabe:
Markieren Sie den Bereich zwischen den beiden folgenden waagerechten Linien mit der Maus und fügen Sie diesen in die Zwischenablage ein (bei Windows mit der Tastenkombination Strg Einfg oder Strg C).


<HTML>
<HEAD>
<Meta HTTP-EQUIV="content-type" content="text/html; charset=iso-8859-1">
<Title>
</Title>
</HEAD>
<BODY>
</BODY>
</HTML>
  • Öffnen Sie einen Editor (Windows: Start-Programme-Zubehör-Editor) und fügen Sie den Inhalt der Zwischenablage ein (Windows: Tastenkombination: Umschalt Einfg oder über das Menue Bearbeiten - Einfügen)
  • Fügen Sie zwischen die Title-Tags eine Überschrift für Ihr Dokument ein (z.B. Meine erste Seite).
  • Fügen Sie zwischen die Body-Tags etwas Text ein (z.B. Es sieht noch nicht toll aus, aber es funktioniert!)
  • Speichern Sie Ihre Datei. Achten Sie bei der Angabe des Dateinamens auf die Groß-/Kleinschreibung und fügen Sie der Datei die Endung .htm oder .html hinzu, z.B. dokument1.htm.
  • Starten Sie nun Ihren Browser und öffnen Sie Ihre Datei. (Wählen Sie im Menue Datei - Öffnen, Durchsuchen - wählen Sie den Pfad zu Ihrer Datei).
  • Der Browser sollte jetzt Ihre Datei darstellen. Falls nicht, überprüfen Sie den Pfadnamen und Dateinamen, unter dem Sie die Datei gespeichert haben.
  • Kehren Sie zum Editor zurück und fügen Sie zusätzlichen Text zwischen die Body-Tags ein.

    • Speichern Sie Ihr Dokument!
  • Wechseln Sie in den Browser und klicken Sie auf Aktualisieren (Internet Explorer) bzw. Neu Laden (Netscape). Ihre Änderung sollte nun sichtbar sein.
Tipp:
Beachten Sie bitte, dass nach jeder Änderung die Datei im Editor gespeichert und im Browser aktualisiert werden muss, um die Änderungen auch tatsächlich zu sehen!
 

Der erste Schritt ist getan. Nun wird das Erscheinungsbild des Textes verändert. Alle weiteren Angaben beziehen sich auf den Bereich zwischen den Body-Tags.
 
Einfache Zeichenformatierungen

Folgende Tags ermöglichen Texthervorhebungen:
<b>fett</b>
<i>kursiv</i>
Das "i" steht für das englische Wort italic (kursiv).
<u>unterstrichen</u>
Das "u" steht für das englische Wort underline (unterstrichen).

<s>durchgestrichen</s> oder
<strike>durchgestrichen</strike>
<big>größer</big>
<small>kleiner</small>
<sup>hochgestellt</sup>
<sub>tiefgestellt</sub>
<tt>dicktengleich</tt>

Beispiel: 
Dieser Satz sieht merkwürdig aus.
hat folgendes Aussehen in HTML:
 

Dieser <b>Satz</b> <i>sieht</i>  <small>merk</small>wür<big>dig</big> aus.

Tags können auch kombiniert werden.

Beispiel:
unterstrichen und kursiv

In HTML:
 

<u><i> unterstrichen und kursiv </i></u>

Aufgabe:

Fügen Sie weiteren Text in Ihr Dokument ein. Verändern Sie das Aussehen des Textes durch einfache Texthervorhebungen. Bauen Sie die folgenden Beispiele nach:
m2
Diese Antwort ist falsch
Kleiner und wieder größer werden
 
Schriftgröße,Schriftart, Farbe

Schriftgröße

Die Schriftart, -größe und -farbe werden mit dem Font-Tag bestimmt <font></font>. Im Anfangstag wird mit der Anweisung (Attribut) size = 3 die Schriftgröße bestimmt. Mögliche Werte für die Größe sind 1 (klein) bis 7 (groß). Sie erzeugen also Text der Größe 4 mit folgender Anweisung
<font size="4">Schrift der Größe 4</font>. Die Standardschriftgröße ist 3. Die Schriftgröße 3 entspricht in etwa der Größe 12pt.
 

Beispiel:
 

<font size="1">Schriftgröße 1</font>
<font size="2">Schriftgröße 2</font>
<font size="3">Schriftgröße 3</font>
<font size="4">Schriftgröße 4</font>
<font size="5">Schriftgröße 5</font>
<font size="6">Schriftgröße 6</font>
<font size="7">Schriftgröße 7</font>

Die Erweiterungen der Tags durch zusätzliche Anweisungen wie size="3" werden als Attribut oder Tag-Attribut bezeichnet. 

Neben der absoluten Größenangabe besteht auch die Möglichkeit, die Schriftgröße relativ zur aktuellen Schriftgröße zu ändern: font size ="+1" oder font size ="-2". 

Beispiel:
 

<font size="-2">Schriftgröße um zwei Größen verringert </font>
<font size="+1">Schriftgröße um eine Größe erhöht</font>

Schriftart

Als Schriftart können Sie grundsätzlich eine der Schriftarten wählen, die in jedem Textverarbeitungsprogramm verwendet werden. Beachten Sie: Die Schriftart muss auch auf dem Rechner des Betrachters Ihrer Web-Site vorhanden sein, nur dann kann sie angezeigt werden. Ist die Schriftart auf dem Computer des Betrachters nicht vorhanden, wird die Standard-Schriftart zur Darstellung verwendet. Dies ist, sofern der Betrachter nichts anderes eingestellt hat, fast immer Times New Roman. Mögliche (und auch gängige) Schriftarten sind Arial, Courier, Verdana, Playbill.
Seien Sie bei der Wahl der Schriftart konservativ und nutzen Sie nicht die Schriftart, um tolle Texteffekte zu realisieren. In der übernächsten Lektion werden Grafiken behandelt. Damit haben Sie auch mehr Gestaltungselemente zur Verfügung.

Beispiel:

Sie wollen Text in der Schriftart Arial darstellen:
 

<font face="Arial">Das ist die Schriftart Arial</font>
<font face="Courier">Das ist die Schriftart Courier</font>

Die Angabe für die Schriftart muss in Anführungszeichen stehen!
Der Name der Schriftart muss mit dem Fontnamen in Windows exakt übereinstimmen. Beachten Sie Groß-/Kleinschreibung!

Die Schriftart kann auch mit der Schriftgröße kombiniert werden.

Beispiel:
 

<font face="Arial"size ="2">Arial in Schriftgröße 2</font>

Schriftfarbe

Schriftfarben werden über das Attribut color="blue" gesteuert. Mit 
<font color="blue">wird blaue Schrift erzeugt</font>. 
Beachten Sie, dass die Farbangabe in Anführungszeichen stehen muss!

Die 16 Grundfarben, die jeder Browser (und jeder PC mit VGA-Grafikkarte) kann:
 
black   maroon  
green   olive  
navy   purple  
teal   gray  
silver   red  
lime   yellow  
blue   fuchsia  
aqua   white  

Die Farbangabe kann mit der Schriftart und -größe kombiniert werden.
Auf unserer Seite finden Sie eine Übersicht der Standard Browser Farben, oder ein interaktives Tool zur Farbwahl.

Beispiel:
 

<font color="green" face="Arial" size="4">grüner Text in Arial mit Schriftgröße 4</font>

Für viele angehende HTML-Programmierer mag diese Farbauswahl nicht ausreichend sein.
Farbauswahl und Farbangaben in HTML

Theorie: (weiter ohne Theorie)

Farbwerte werden in HTML hexadezimal angegeben. Der Wert setzt sich aus den drei Farben Rot Grün Blau (rgb) zusammen. Angegeben wird der Rot-, Grün und Blauwert einer Farbe. 
Die Farbe Rot wird erzeugt, indem der Wert für Rot auf den größtmöglichen Wert eingestellt wird, die Werte für Grün und Blau sind Null. 
Die Farbe schwarz wird erzeugt indem alle Farbanteile auf Null gesetzt werden. Weiß ergibt sich durch die Mischung aller drei Grundfarben Rot, Grün und Blau. 
Die Farbwerte für die drei Grundfarben liegen zwischen 0 und 255. Die Farbe gelb ist eine Mischung aus Rot und Grün ohne blauen Farbanteil. Der Wert für Rot und Grün wird auf 255, der Wert für Blau auf 0 gesetzt. Die Angabe für Gelb lautet also 255,255,0 (in der Reihenfolge Rot Grün Blau).

Diese Farbwerte müssten jetzt von ihrer dezimalen Darstellung in das hexadezimale System übertragen werden. 
Der hexadezimale Wert setzt sich aus 6 Stellen zusammen. Die ersten beiden Stellen sind für Rot, die mittleren beiden für Grün und die letzten beiden für Blau. 

Für jede der drei Farben gilt: Der kleinste Wert 0 entspricht 00, der größte Wert 255 entspricht FF. Jede Ziffer wird gezählt von 0 - 9 und dann folgt A,B,C,D,E,F.
Die erste Stelle der jeweiligen Farbe ist die Grobeinstellung, die zweite Stelle die Feineinstellung.
Beispiel: Die Farbe mit der Nummer FF0000 hat nur den maximalen Rot Anteil und sieht so aus X. Grün und Blau liefern keine Anteile. Die Farbe mit der Nummer 008080 hat grüne und blaue Anteile, jedoch kein Rot. Wird der blaue Anteil erhöht, ändern sich die letzten beiden Stellen 0080CC.

Als zweites Beispiel erhöhen wir, ausgehend von der Farbe rot, den grünen Farbanteil. 
Rot FF0000 sieht so aus X.
Grünanteil erhöhen:
Code FF9000 X
Code FFA000 X
Code FFB000 X
Code FFC000 X
Code FFD000 X
Code FFE000 X
Code FFF000 X
maximaler Rot- und Grünanteil:
Code FFFF00 X Das ist gelb
 

Farbanteil rot reduzieren
Code F0FF00 X
Code E0FF00 X
Code D0FF00 X
Code C0FF00 X
Code B0FF00 X
Code A0FF00 X
Maximaler Grünanteil:
Code 00FF00 X Das ist grün

Diese Farbwerte werden in HTML eingebunden: color="#FF00B0"
Wichtig ist das # -Zeichen vor dem eigentlichen Wert. Wenn die Schriftfarbe eingestellt wird, lautet der Befehl: <font color ="#00B0B0">Text in Farbe</font>.

Um die Farbwerte einzustellen, ist es sinnvoll, einem Programm die Arbeit zu überlassen:
 
 


Entweder Sie verfügen über ein Grafikprogramm, das den HTML-Code einer bestimmten Farbe anzeigt, oder Sie haben den Color-Manager von unserer Webseite heruntergeladen. Color-Manager downloaden (gehen Sie in den geschützten Bereich für Teilnehmer). Damit können Sie beliebige Farbwerte bestimmen und angeben. 

Die Syntax für die Textfarbe ist:
<font color=#Farbwert>Hier steht der bunte Text</font>
 

Beispiel: 
 

<font color="#FFC0CB">pink</font>
<font color="#EE82EE">violet</font>
<font color="#F0E68C">khaki</font>
<font color="#DAA520">rotgold</font>
<font color="#4B0082">indigo</font>

Wenn Sie die Farbe mittels Farbwert eingeben, muss stets das # Zeichen als führendes Zeichen mit angegeben werden.
 

Die Einstellung für die Textfarbe kann mit der Schriftgröße und Art kombiniert werden.

Beispiel:
 

<font face="Arial" size="2" color="#FF0000">Arial in Schriftgröße 2 und rot</font>

Sie können auch jede Angabe zu Größe, Farbe und Schriftart einzeln notieren, beachten Sie aber, dass Sie zu jedem Anfangs-Tag auch ein Ende-Tag benötigen.

Beispiel: 
 

<font face="Arial"><font size="2"><font color="#FF0000">Arial in Schriftgröße 2 und rot</font></font></font>

Aufgabe:
Testen Sie selbst, experimentieren Sie mit Schriftgröße und Farbe. Bauen Sie die folgenden Beispiele selbst nach:

Das ist die Schriftart Courier in der Farbe blau und Schriftgrösse 3

Schriftart Arial, grau, Grösse 4

Schriftart Times, rot, Grösse 1

DER  REGENBOGEN
 

 

Voreinstellungen für Hintergrundfarbe und Textfarbe


Voreinstellung für Hintergrundfarbe

Um die Hintergrundfarbe des Dokuments einzustellen, müssen Sie lediglich das einleitende Body-Tag mit dem Attribut bgcolor (engl. backgroungcolor) versehen und die Farbangabe hinzufügen:
<body bgcolor="#0000FF"> oder
<body bgcolor="blue"> 

Erweitern Sie das bereits exitierende <body> - Tag, fügen Sie kein neues <body> - Tag hinzu. 

Voreinstellung für Textfarbe

Um die Textfarbe des Dokuments festzulegen müssen Sie das einleitende Body-Tag mit dem Attribut text erweitern und die Farbangabe hinzufügen:
<body text="#0000FF"> oder
<body text="blue"> 

Erweiteren Sie das bereits exitierende <body> - Tag, fügen Sie kein neues <body> - Tag hinzu. 

Dieser Befehl gilt für die globale Voreinstellung der Textfarbe des Dokuments und kann natürlich stets mit dem Tag <font color="#FF00FF" > </font>geändert werden.

Beispiel: 

Hintergrundfarbe indigo, Textfarbe rot, der mittlere Teil des Textes soll weiß erscheinen: 
In HTML:
 

<body text="red" bgcolor="#4B0082"> 
  erster Teil
    <font color="white">mittlerer Textteil </font> 
    Der Text dahinter wird automatisch wieder rot. 
</body>

Testen Sie das Aussehen im Browser. 

Wie Sie eine Grafik als Hintergrundbild einbinden, erfahren Sie in Lektion 4.

Aufgabe:
Erstellen Sie eine neue HTML-Datei. Erstellen Sie einen einfachen Text. Benutzen Sie Voreinstellungen für Hintergrund- und Textfarbe. Ändern Sie die Einstellungen für Schriftart, Größe und Farbe. Verwenden Sie Texthervorhebungen (fett, kursiv etc.). Beachten Sie bitte die Wirkung Ihrer Befehle. Vergessen Sie nicht, Ihre Tags wieder zu schließen. Erst das Ende-Tag schaltet einen Befehl wieder aus! Lassen Sie keine einzelnen < oder > Zeichen in Ihrem Dokument liegen! Alle löschen! Ihr Browser dankt mit richtiger Darstellung.

Hinweis:
Im jetzigen Stadium haben Sie noch keinen Einfluss auf die Zeilenumbrüche. Dies erledigt der Browser für Sie. 
Dazu erfahren Sie alles im nächsten Abschnitt.

Tipp: 
Bei falschen Befehlen und Angaben in Ihrem HTML-Dokument bekommen Sie keine Fehlermeldungen oder Hinweise! Der Browser zeigt nur etwas anderes an, als Sie beabsichtigen (The trouble with computers is, that they do what you tell them, not what you want them to do!).
 

 
Absatzformatierung

In HTML wird ein Absatz wie folgt eingeleitet:
<p>Text Text Text Text</p>
Ein Absatz beginnt stets mit einer neuen Zeile und endet mit einem Zeilenumbruch in der letzten Zeile des Absatzes.
Die Ausrichtung des Textes kann durch das Attribut align= center, left, right, justify bestimmt werden. Wird keine Ausrichtung gewählt, ist der Text automatisch linksbündig.

Beispiel: 
 

<p align="center">
Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet
</p>

<p align="right">
Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig.
</p>

<p align="justify">
Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet.
</p>

Sehen und testen Sie selbst, nicht jeder Browser in jeder Version unterstützt den Blocksatz.
 

Wenn Sie für einen Absatz die Schriftgröße einstellen wollen, müssen Sie das Absatz- und Font-Tag verwenden:

Beispiel: 
 

<p><font size="3">Text im Absatz in Schriftgröße 3</font></p>
 
Zeilenumbruch verhindern und erzwingen

Schalten Sie in Ihrem Browser auf Teilbild um (rechts oben in der Titelleiste der vorletzte Button). Ändern Sie die Größe des Anzeigefensters manuell. Beobachten Sie, wie der Browser bei verschiedenen Fenstergrößen die Zeilen automatisch umbricht. Es müsste jetzt der Text immer im Fenster sichtbar sein, weil entsprechend der Fenstergröße der Text umgebrochen wird. 
Um zwischen zwei Worten einen Zeilenumbruch zu verhindern, verwenden Sie ein Sonderzeichen: &nbsp; Dieses Zeichen steht für no breaking space, zu deutsch: kein umbrechendes Leerzeichen.

Beispiel: 

Sie machen in Ihrem Text die Angabe Euro 12,-. Es würde etwas merkwürdig aussehen, wenn jetzt zwischen Euro und 12,- ein Zeilenumbruch wäre. Um dies zu verhindern setzen Sie nur das Sonderzeichen &nbsp; ohne weitere Leerzeichen zwischen Euro und 12,-: 

In HTML
 

EUR&nbsp;12,-

Beachten Sie: Das Zeichen beginnt mit einem & und endet mit einem ;

Um einen bestimmten Bereich vor einem Zeilenumbruch zu schützen, verwenden Sie das Tag
 

<nobr>Internet GmbH & Co. KG</nobr>.

NOBR steht für nobreak (kein Umbruch). Der Bereich zwischen diesen Tags wird jetzt nicht mehr umgebrochen.

Testen Sie selbst durch Verändern der Fenstergröße des Browsers.
 

Zeilenumbruch erzwingen

Aus dem letzten Tag ergibt sich fast automatisch das Tag für einen erwünschten Zeilenumbruch:<br> steht für break als Umbruch. Das Tag für den erzwungenen Zeilenumbruch ist eines der wenigen Tags, das kein Endetag hat. 

Beispiel: 
 

Dies ist die erste Zeile<br>nach dem Zeilenumbruch folgt die zweite Zeile. 

Im Browser sieht diese Zeile so aus:

Dies ist die erste Zeile 
nach dem Zeilenumbruch folgt die zweite Zeile.

Tipp:
Um mehrere Leerzeilen zu erzeugen, reicht es aus mehrere <br> tags hintereinander zusetzen! Ältere Browser zeigen dies jedoch nicht immer richtig an.
Sie müssen, damit es echte Leerzeilen werden, auch ein (Leer-)Zeichen in die Zeile setzen:
Verwenden Sie das geschützte Leerzeichen &nbsp;

Beispiel: 
 

<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>

Erzeugt drei echte Leerzeilen.

Aufgabe: 
Erstellen Sie ein HTML-Dokument, bestehend aus vier Absätzen. 
Im ersten Absatz steht zentriert eine kurze Inhaltsangabe zur Seite. 
Der zweite Absatz ist linksbündig und enthält Angaben über die Ziele, Absichten und Zielgruppe, die Sie mit Ihrer Web-Site verfolgen bzw. ansprechen.
Der dritte Absatz ist im Blocksatz formatiert und enthält weitere Infos zu den Inhalten und Aktivitäten auf Ihrer Site.
Der vierte Absatz ist rechtsbündig und stellt eine Art Fußzeile dar, in der sich Angaben zum Autor und dem Erstellungsdatum der Seite befinden.

Nehmen Sie bitte die geforderten Angaben zu den Inhalten ernst, da diese Überlegungen Tipps für den Erfolg ihrer Internet-Präsenz sind.

Versuchen Sie, mit Schriftgröße und Schriftfarbe einzelne Textstellen hevorzuheben. Stellen Sie weniger wichtige Angaben (wie im letzten Absatz) kleiner dar. Variieren Sie auch Hintergrund und Textfarbe. 
Achten Sie jedoch stets bei Ihren Einstellungen darauf, ein gefälliges Erscheinungsbild zu erzielen - die Seite muss Ihnen natürlich gefallen - aber das Layout sollte auch die Zielgruppe Ihrer Seite ansprechen und die Inhalte der Seite sollten leicht erfassbar sein. 


Überprüfen Sie, ob die von Ihnen vorgenommenen Anweisungen auch tatsächlich erscheinen: Ist wirklich nur der von Ihnen markierte Bereich kursiv, fett oder farbig? Stimmt die Textausrichtung, Schriftgrösse und Farbe?



Nach diesen einfachen, aber wirkungsvollen Befehlen lernen Sie im nächsten Kapitel weitere Befehle für die Formatierung. Sie erfahren, wie Sie Grafiken in Ihre Dokumente einbinden, gestalten und ausrichten.


vorige Lektion
nächste Lektion
Inhaltsverzeichnis nach oben

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben, schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.